import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import ImagePicker from 'react-native-image-picker';
import Video from 'react-native-video';
import _updateConfig from '../../update.json';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableOpacity,
  Platform
} from 'react-native';

const { width, height } = Dimensions.get('window');
const options = {
  title: '请选择',
  quality: 0.8,
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '选择相册',
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
}
const {appKey} = _updateConfig[Platform.OS];

export default class Splash extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatarSource: null // 图片
    };
  }

  componentDidMount() {
    SplashScreen.hide();
    console.log('appKey');
    console.log(appKey);
  }

  /* 选择图片 */
  imgBtn = () => {

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };
        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };
        this.setState({
          avatarSource: source,
        });
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Splash</Text>
        <TouchableOpacity
          style={styles.imgBtn}
          onPress={this.imgBtn}
        >
          <Text>按钮</Text>
        </TouchableOpacity>
        <Image source={this.state.avatarSource} style={styles.uploadAvatar} />
        {/* 音频 */}
        <View style={styles.center}>
          <Video
            source={require('../images/test02.mp4')}   // Can be a URL or a local file.
            onBuffer={() => { console.log('正在缓冲'); }}                //远程视频正在缓冲时的回调
            onError={() => { console.log('error'); }}               //无法加载视频时的回调
            style={styles.backgroundVideo}
            controls={true}
          />
        </View>
        <TouchableOpacity
          style={styles.imgBtn}
          onPress={this.imgBtn}
        >
          <Text>按钮</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0ff'
  },
  imgBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f00',
    marginVertical: 10,
    marginHorizontal: 20,
    borderRadius: 6,
    paddingVertical: 8,
    paddingHorizontal: 16
  },
  uploadAvatar: {
    width: 50,
    height: 50,
    backgroundColor: '#ccc',
    borderRadius: 25,
  },
  backgroundVideo: {
    height: 200,
    width: 330,
    backgroundColor: '#00f',
  },
  center: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  }
});